import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { Toast, NavBar, Button } from 'react-vant';
import { replace, filtion } from "verification-sensitive";
import '../../scss/lwl/answer.css'
export default function Lwl_Answer() {
    const jump = useNavigate()
    const [question, setQuestion] = useState([])
    const getQuestion = async () => {
        let { data: { question } } = await axios.get('http://localhost:3000/question')
        setQuestion(question)
    }
    const [answer, setAns] = useState([])
    const getAnswer = async () => {
        let { data: { answer } } = await axios.get('http://localhost:3000/answer')
        setAns(answer)
    }
    useEffect(() => {
        getQuestion()
        getAnswer()
    }, [])
    const [flag, setFlag] = useState(false)
    const [id, setId] = useState('')
    const getQueId = (id) => {
        setId(id)
        setFlag(!flag)
    }
    const [say, setSay] = useState('')
    const common = async (qid) => {
        if (say === '') {
            Toast.fail('请输入内容')
        } else {
            let flag = filtion(say)
            if (flag == true) {
                await axios.post('http://localhost:3000/answerAdd', { qid: qid, answer: replace(say,'*') })
                Toast.success('回复成功')
                setFlag(!flag)
                getAnswer()
                getQuestion()
            }else{
                await axios.post('http://localhost:3000/answerAdd', { qid: qid, answer: say })
                Toast.success('回复成功')
                setFlag(!flag)
                getAnswer()
                getQuestion()
              }
        }
    }
    const goEvery = (id) => {
        jump(`/everyans?id=${id}`)
    }
    return (
        <div id='answer'>
            <NavBar
                title="问大家"
                onClickLeft={() => { jump(-1) }}
            />
            <h2 style={{ paddingLeft: '10px' }}>福港园大厦</h2>
            {question.map(item => (
                <div className="questionlist">
                    <div className="reSay">
                        <div className="qphoto">
                            <img src="./aaa1.jpg" alt="" />
                            <span className='quetip'>问</span>
                        </div>
                        <div className="ques">{item.question}</div>
                    </div>
                    {answer.filter(element => element.qid === item._id).slice(-1).map(ele => (
                        <>
                            <div key={ele._id} className='anslist'>
                                <div className="qphoto1">
                                    <img src="./aaa5.png" alt="" />
                                    <span className='anstip'>答</span>
                                </div>
                                <div className="ques">{ele.answer}</div>
                                <div className='openAnswer'>
                                    <span style={{ paddingLeft: '10px', cursor: 'pointer' }} onClick={() => { goEvery(item._id) }}>全部{answer.filter(i => i.qid === item._id).length}条回复</span>
                                </div>
                            </div>
                        </>
                    ))}
                    <button style={{ marginLeft: '40px' }} className={answer.filter(i => i.qid === item._id).length > 0 ? 'hidden' : 'show'} onClick={() => { getQueId(item._id) }}>回复{'>'}</button>
                    {flag && id === item._id &&
                        <div className='say'>
                            <input type="text" placeholder='来说点儿什么' value={say} onChange={(e) => { setSay(e.target.value) }} />
                            <Button type='primary' size='mini' onClick={() => { common(item._id) }}>评论</Button>
                        </div>
                    }
                </div>
            ))}
        </div>
    )
}
